<template>
    <div>
        <!-- 从药品库增加 -->
        <h2>选择药品</h2>
        <div class="head">
            <div class="my_btn">
                <el-button @click="back" size="mini" type="info" class="el-icon-back">
                    返回
                </el-button>
            </div>
            <div class="search">
                <el-input v-model="searchContent" placeholder="查找..." class="input-with-select">
                    <el-button @click="mySearch" slot="append" icon="el-icon-search"></el-button>
                </el-input>
            </div>
        </div>
        <template>
            <el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%"
                @selection-change="handleSelectionChange">
                <el-table-column prop="img_src" label="药品图片" width="40" align="center">
                    <template slot-scope="scope">
                        <!-- <img src="../../../public/images/notfoundImg.png" alt="" width="30"
                            height="30"> -->
                        <img v-if="scope.row.img == ''" src="../../../public/images/notfoundImg.png" alt="" width="30"
                            height="30">
                        <img v-if="scope.row.img != ''" :src="$host + scope.row.img" alt="" width="30" 
                            height="30">
                    </template>
                </el-table-column>
                <el-table-column prop="drugTypeName" label="药品分类" width="80">
                </el-table-column>
                <el-table-column prop="drugName" label="药品名称" width="80">
                </el-table-column>
                <el-table-column prop="id" label="药品编号" show-overflow-tooltip>
                </el-table-column>
                <el-table-column prop="model" label="型号" show-overflow-tooltip>
                </el-table-column>
                <el-table-column prop="price" label="客户单价" width="80">
                </el-table-column>
                <el-table-column prop="num" label="库存数量" width="80">
                </el-table-column>
                <el-table-column prop="unitName" label="单位" width="120">
                </el-table-column>
                <el-table-column prop="createTime" label="创建时间" show-overflow-tooltip>
                    <template slot-scope="scope">
                        {{ 
                            dayjs(scope.row.createTime)
                            .format('YYYY-MM-DD HH: mm: ss') }}
                    </template>
                </el-table-column>
                <el-table-column prop="status" label="状态" width="80">
                    <template slot-scope="scope">
                    <el-tag disable-transitions type="success"
                        v-if="scope.row.status == 0">
                            有效
                    </el-tag>
                    <el-tag disable-transitions type="info"
                        v-if="scope.row.status == 1">
                            无效
                    </el-tag>
                </template>
                </el-table-column>
                <el-table-column fixed="right" label="操作" align="center" width="180">
                    <template slot-scope="scope">
                        <el-button type="primary" size="mini" class="el-icon-plus" @click="selectItem(scope.row)">
                            选择该药品
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
            <!-- 分页器 -->
            <Pagination @getPagination="getPagination" :total="total" :pageSize="pageSize"></Pagination>
        </template>

        <el-dialog :visible.sync="dialogFormVisible">
            <el-form :model="form">
                <el-form-item label="药品名称" :label-width="formLabelWidth">
                    <el-input v-model="form.drugName" autocomplete="off" readOnly></el-input>
                </el-form-item>
                <el-form-item label="药品编号" :label-width="formLabelWidth">
                    <el-input v-model="form.id" autocomplete="off" readOnly></el-input>
                </el-form-item>
                <el-form-item label="型号" :label-width="formLabelWidth">
                    <el-input v-model="form.model" autocomplete="off" readOnly></el-input>
                </el-form-item>
                <el-form-item label="单价" :label-width="formLabelWidth">
                    <el-input v-model="form.price" autocomplete="off" readOnly></el-input>
                </el-form-item>
                <el-form-item label="单位" :label-width="formLabelWidth">
                    <el-input v-model="form.unitName" autocomplete="off" readOnly></el-input>
                </el-form-item>
                <el-form-item label="数量" :label-width="formLabelWidth">
                    <el-input v-model="form.num" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="备注" :label-width="formLabelWidth">
                    <el-input type="textarea" :rows="5" v-model="form.remarks"></el-input>
                </el-form-item>
                
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="addItem">新 增</el-button>
            </div>
        </el-dialog>
</div>
</template>

<script>
import dayjs from 'dayjs'
import Pagination from '@/components/Pagination'
export default {
    name: 'SelectItem',
    components: {
        Pagination,
    },
    data() {
        return {
            searchContent:'',
            pageSize:5,
            total:0,
            form: {
                drugName: '眼药',//药品名称
                id: 2001,//药品编号
                model:'9',//型号
                price:'10',//单价
                unitName:'瓶',//单位
                num:'',//数量
                remarks:'',//备注
                img_src:'',
            },
            listTotal: [],
            tableData: [
                {
                    "drugTypeName": '',//药品分类
                    "drugName": '',//药品名称
                    "id": '',//药品编号
                    "model": '',//型号
                    "price": '',//客户单价
                    "num": '',//库存数量
                    "unitName": '',//单位
                    "createTime": '',//创建时间
                    "status":'',//0有效1无效
                    img_src: '',
                    "img":'',
                },
            ],
            form2:{
                "diagnosisId": 3,
                "drugId": 1,
                "num": 1,
                "remarks": "红红火火"
            },
            multipleSelection: [],
            dialogFormVisible: false,
            formLabelWidth: '120px',
        }
    },
    created(){  
        this.$axios({
            method:'get',
            url:'/drugManagement/drugManagement/findDrugList',
            params:{
                "currentPage":1,//当前页数默认第一页
                "pageSize":5,//每页显示记录数
            }
        })
        .then(resp=>{
            this.total=resp.data.data.total;
            this.tableData=resp.data.data.list;
        })
    },
    methods: {
        dayjs,
        back() {
            this.$router.push({path:'/Diagnosis/Item',query:{patient:this.$route.query.patient,id:this.$route.query.id}})
        },
        selectItem(row){
            if(row.status==1){//判断药品是否有效
                this.$message({
                    message: '警告，该药品处于无效状态',
                    type: 'warning'
                });
            }else{
                this.form.drugName=row.drugName;
                this.form.id=row.id;
                this.form.model=row.model;
                this.form.price=row.price;
                this.form.unitName=row.unitName;
                this.form.num='';
                this.form.remarks=row.remarks;
                this.form2.diagnosisId=this.$route.query.id;
                this.form2.drugId=row.id;
                this.dialogFormVisible = true
            }
            
        },
        addItem(){//新增药品到开药单
            this.form2.num=this.form.num;
            this.form2.remarks=this.form.remarks;
            this.$axios({
                method:'post',
                url:'/diagnosis/diagnosisManagement/addDiagnosisDrug',
                data:{
                    "diagnosisId": this.form2.diagnosisId,
                    "drugId": this.form2.drugId,
                    "num": this.form2.num,
                    "remarks": this.form2.remarks
                }
            })
            .then(resp=>{
                this.dialogFormVisible = false
            })
        },
        mySearch(){//条件查询
            if(this.searchContent==''){//如果值为空显示所有
                this.$axios({
                    method:'get',
                    url:'/drugManagement/drugManagement/findDrugList',
                    params:{
                        "currentPage":1,//当前页数默认第一页
                        "pageSize":5,//每页显示记录数
                    }
                })
                .then(resp=>{
                    this.total=resp.data.data.total;
                    this.tableData=resp.data.data.list;

                })
            }else{
                this.$axios({//根据条件分页查询药品库信息
                method:'post',
                url:`/drugManagement/drugManagement/findDrugByCondition?condition=${this.searchContent}&currentPage=1&pageSize=5`,
                data:{
                    "condition":this.searchContent,
                    "currentPage":1,//当前页数默认第一页
                    "pageSize":5,//每页显示记录数
                }
            })
            .then(resp=>{
                this.total=resp.data.data.total;
                this.tableData=resp.data.data.list
            })
            }
            
        },
        getPagination(page) {
            this.$axios({
                method:'get',
                url:'/drugManagement/drugManagement/findDrugList',
                params:{
                    "currentPage":page,//当前页数默认第一页
                    "pageSize":5,//每页显示记录数
                }
            })
            .then(resp=>{
                this.tableData=resp.data.data.list;

            })

        },
        //列表单选多选
        handleSelectionChange(val) {
            this.multipleSelection = val;
        },
        //进入修改页面
        goChange(id) {
            this.$router.push('/supply/supFollow/editFollow')
        },
        //删除药品
        deleteMed(id) {
            this.$confirm('此操作将删除该种药品, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.$message({
                    type: 'success',
                    message: '删除成功!'
                });
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        },

    },

}
</script>

<style lang="less" scoped>
h2 {
    text-align: left;
    margin: 10px;
}

.head {
    margin: 5px;
    padding: 10px;
    height: 40px;
    border-top: 5px solid gainsboro;
    border-radius: 5px;
    background-color: white;
}

.my_btn {
    float: left;
}

.search {
    float: right;

}

.my_search {
    padding: 5px;
}
</style>